<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
    <meta name="renderer" content="webkit">
    <title>添加新员工</title>
    <!-- 公共样式 开始 -->
    <link rel="stylesheet" type="text/css" href="../../css/base.css">
    <link rel="stylesheet" type="text/css" href="../../fonts/iconfont.css">
    <script type="text/javascript" src="../../framework/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
    <script type="text/javascript" src="../../layui/layui.js"></script>
    <script src="../../framework/cframe.js"></script><!-- 仅供所有子页面使用 -->
    <!-- 公共样式 结束 -->

    <style>
        .layui-form{
            margin-right: 30%;
        }
    </style>

</head>
<body>
<script>
    function txtChange(){

            $.ajax({
                url:"/empl/sReapeated",
                type:"post",
                data:{
                    saccount:$("input[name='saccount']").val()
                },
                dataType:"json",
                success:function(data){
                    if(data!=0){
                        alert("账号已存在")
                    }
                },
                error:function(data){
                    if(data!=0){
                        alert("账号已存在")
                    }
                }
            });
    }

</script>
<hr style="color: #0e5fa6">

<form class="layui-form" th:action="@{/empl/add}">
    <!--账号-->
    <div class="layui-form-item">
        <label class="layui-form-label">账号</label>
        <div class="layui-input-block">
            <input type="text" name="saccount" onchange="txtChange();" lay-verify="account" placeholder="请输入账号" autocomplete="off" class="layui-input">
            <span th:id="mes"></span>
        </div>
    </div>
    <!--密码-->
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="password" name="spassword" lay-verify="pass"  placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <!--姓名-->
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input type="text" name="sname" lay-verify="required" lay-reqtext="姓名不能为空" placeholder="请输入姓名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <!--年龄-->
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-inline">
                <input type="tel" name="sage" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <!--电话-->
        <div class="layui-inline">
            <label class="layui-form-label">预留手机号</label>
            <div class="layui-input-inline">
                <input type="tel" name="sphone" lay-verify="required|phone" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <!--性别-->
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="ssex" value="男" title="男" checked="">
            <input type="radio" name="ssex" value="女" title="女">
        </div>
    </div>


    <!--身份证-->
    <div class="layui-form-item">
        <label class="layui-form-label">验证身份证</label>
        <div class="layui-input-block">
            <input type="text" name="scard" lay-verify="required|identity" placeholder="" autocomplete="off" class="layui-input">
        </div>
    </div>

    <!--职务-->
    <div class="layui-form-item">
        <label class="layui-form-label">职务</label>
        <div class="layui-input-block">
            <select name="role_id" lay-verify="select1" >
                <option value="">请选择职务</option>
                <option th:each="role:${roles}" th:value="${role.role_id}" th:text="${role.role}"></option>
            </select>
        </div>
    </div>
    <!--部门-->
        <div class="layui-form-item">
            <label class="layui-form-label">所属部门</label>
            <div class="layui-input-block">
                <select name="department_id" lay-verify="select2">
                    <option value="">请选择部门</option>
                    <option th:each="dep:${departments}" th:value="${dep.department_id}" th:text="${dep.dname}"></option>
                </select>
            </div>
        </div>

    <!--提交-->
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn " lay-submit lay-filter="form">立即提交</button>
            <!--<input type="submit" class="layui-btn" th:value="立即注册">-->
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>

</form>
<!--表单验证-->
<div id="con"></div>
<script>

    layui.use(['form'], function() {
        var form = layui.form

        //自定义验证规则
        form.verify({
            account: function(value){
                if(value.length < 5){
                    return '账号至少5个字符';
                }
            }
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
            ,select1:function (value) {
                if(value=="请选择职务"){
                    return '请选择职务';
                }
            }
            ,select2:function (value) {
                if(value=="请选择部门"){
                    return '请选择部门';
                }
            }

        });

    });
</script>


</body>
</html>